<template>
  <div class="home">
    <!-- 头部搜索框 -->
    <van-search
      shape="round"
      background="rgb(253, 222, 74)"
      placeholder="请输入搜索关键词"
      disabled
    />
    <!-- 滚动分类视图 -->
    <van-tabs color="#000" background="rgb(253, 222, 74)">
      <van-tab
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        to="/category"
      ></van-tab>
    </van-tabs>
    <!-- 首页轮播图 -->
    <!-- <van-swipe :autoplay="3000" class="home-swipe">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.image" :style="{width: '100%', height: '100%'}" />
      </van-swipe-item>
    </van-swipe> -->

    <!-- 利用 swiper 来实现轮播效果 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="banner in banners"
          :key="banner.id"
        >
          <div>
            <img v-lazy="banner.image" :style="{width: '100%', height: '100%'}" />
            <div>这是价格</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 宫格布局 -->
    <van-grid :column-num="4" icon-size="48px">
      <van-grid-item
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.icon"
        :text="grid.text"
        :badge="grid.badge"
      />
    </van-grid>

    <!-- 推荐商品列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="loadMore"
    >
      <van-card
        v-for="prod in products"
        :key="prod.id"
        :price="prod.price | money"
        :origin-price="prod.originPrice | money"
        :desc="prod.title"
        :title="prod.title"
        :thumb="prod.image"
        @click="jumpToDetail(prod.id)"
      >
        <template v-slot:price-top>
          <div>
            <van-tag plain type="primary" v-if="prod.isFreePostage">包邮</van-tag>
            <van-tag plain type="primary" v-if="prod.couponValue">{{prod.couponValue}}</van-tag>
          </div>
        </template>
        <template #num>
          <span>月销量: {{ prod.saleNum }}</span>
          <van-icon
            name="cart-circle-o"
            size="24px"
            color="#f00"
            @click.stop="handleAddToCart(prod)"
          />
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Swiper from 'swiper/swiper-bundle'
import { getCategories } from '@/api/category'
import { getHomeData, getMoreProducts } from '../../api/home'
// 对于在 assets 目录下的图像资源，仍然需要使用模块的方式引入，用 import 或 require() 都行
import elm from '@/assets/elm.png'

import 'swiper/swiper-bundle.min.css'

export default {
  name: 'Home',
  data() {
    return {
      categories: [], // 所有分类
      banners: [], // 轮播图图片数组
      grids: [ // 宫格中的数据内容
        { id: 1, icon: elm, text: '饿了么红包', badge: '最高66元' },
        { id: 2, icon: require('../../assets/meituan.png'), text: '美团红包', badge: '最高55元' },
        { id: 3, icon: require('../../assets/free.png'), text: '9.9包邮', badge: '' },
        { id: 4, icon: require('../../assets/sign.png'), text: '签到红包', badge: '' },
      ],
      products: [], // 推荐商品的数组
      loading: false, // 表示列表组件中是否正在加载数据
      finished: false, // 表示列表组件中是否所有数据加载完毕
      nextIndex: 0, // 下一页推荐商品数据的起始索引
    }
  },
  created() {
    console.log('home created.................')
    // 视图初始渲染，就需要发送网络请求获取后端
    // 接口数据，通常在 created() 生命周期钩子
    // 中来发送网络请求

    // 发送网络请求，获取分类数据
    getCategories()
      .then(data => {
        console.log('结果:', data)
        this.categories = data.list
      })
      .catch(error => console.error('异常:', error))
    // 发送网络请求，获取首页轮播图与推荐商品数据
    getHomeData()
      .then(data => {
        console.log('首页数据: ', data)
        this.banners = data.banners

        // Vue.nextTick() 与 this.$nextTick() 作用一致，
        // 延迟 callback 回调函数的执行：延迟到下一次
        // DOM 更新循环结束之后
        this.$nextTick(() => {
          // banners 数组更新后，创建 Swiper 对象实例
          const mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: true, // 自动轮播
            slidesPerView: 3,
            grid: {
              fill: 'column',
              rows: 2,
            },
            effect: 'coverflow',
            // slidesPerView: 3,
            centeredSlides: true,
          })
          console.log(mySwiper)
        })

        this.products = data.items.list
        this.nextIndex = data.items.nextIndex
        this.finished = data.items.isEnd
      })
      .catch(error => console.error('异常:', error))
  },
  // mounted() {
  //   /** 创建 Swiper 实例 */
  //   const mySwiper = new Swiper('.swiper-container', {
  //     loop: true, // 循环模式选项
  //     autoplay: true, // 自动轮播
  //   })
  //   console.log(mySwiper)
  // },
  // updated() {
  //   /** 创建 Swiper 实例 */
  //   const mySwiper = new Swiper('.swiper-container', {
  //     loop: true, // 循环模式选项
  //     autoplay: true, // 自动轮播
  //   })
  //   console.log(mySwiper)
  // },
  destroyed() {
    console.log('home destroyed...............')
  },
  activated() {
    console.log('home activated..............')
  },
  deactivated() {
    console.log('home deactivated..........')
  },
  methods: {
    /**
     * 页面触底加载更多数据
     */
    loadMore() {
      getMoreProducts(this.nextIndex)
        .then(data => {
          console.log('更多:', data)
          // 将查找到的更多数据追加到已有的商品数组中
          this.products = this.products.concat(data.list)
          this.nextIndex = data.nextIndex

          // 数据更新完毕，将 loading 设置为 false
          this.loading = false
          // 数据全部查询结果，将 finished 设置为 true（这个值和后端接口中返回的 isEnd 一致）
          this.finished = data.isEnd
        })
        .catch(error => console.error('异常:', error))
    },
    jumpToDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id,
        },
      })
    },
    /**
     * 处理加入购物车
     */
    handleAddToCart({ id, title, price, image }) {
      // 构建当前选购商品对象
      const currentProduct = {
        id,
        title,
        price,
        image,
        amount: 1, // 选购数量
      }
      // 保存到 vuex 的 store 中
      this.$store.commit('shoppingCart/addToCart', currentProduct)
      // 提示
      Toast.success({
        message: '加入购物车',
        duration: 500,
      })
    },
  },
  filters: { // 过滤器-用于文本格式化
    money(val) {
      return Number(val).toFixed(2)
    },
  },
}
</script>

<style lang="less" scoped>
  .home-swipe {
    width: 360px;
    height: 150px;
    margin: 6px auto;
    border-radius: 6px;
  }

  // 样式穿透
  // .home >>> .van-info {
  // .home /deep/ .van-info {
  .home ::v-deep .van-info {
    white-space: nowrap;
    right: 8px;
  }

  .swiper-container {
    width: 100%;
    height: 150px;
  }
</style>
